<template>
	<scroll-view style="z-index: 9999;" scroll-y="auto" class="bg-white fixed top0 left0 vh-100 vw-100">
		<view style="margin-top: 100rpx;" class="bg-white">
			<view class="padding text-main">房间信息</view>
			<view class="cu-form-group bg-g-main radius">
				<view class="title text-main">名称：</view>
				<view class="w-60">
					<input class="bg-white radius text-right " placeholder="请输入房间名" v-model="afj.fjmc"></input>
				</view>
			</view>
			
			<view class="cu-form-group margin-top-xs bg-g-main radius">
				<view class="title text-main">面积：</view>
				<view class="w-60">
					<input type="number" class="bg-white radius text-right " placeholder="请输入面积" v-model="afj.mj"></input>
				</view>
			</view>
			
			<view class="cu-form-group margin-top-xs bg-g-main radius">
				<view class="title text-main">单价：</view>
				<view class="w-60">
					<input type="number" class="bg-white radius text-right " placeholder="请输入单价" v-model="afj.dj"></input>
				</view>
			</view>
			
			<view class="cu-form-group margin-top-xs bg-g-main radius">
				<view class="title text-main">类型：</view>
				<view class="w-60">
					<zqs-select :list="tps" v-model="afj.tp" title="选择房间类型" labelKey="value" valueKey="code"></zqs-select>
				</view>
			</view>
			
			<view class="cu-form-group margin-top-xs bg-g-main radius">
				<view class="title text-main">功能：</view>
				<view class="w-60">
					<zqs-select :list="funcs" v-model="afj.func" title="选择房间功能" labelKey="value" valueKey="code"></zqs-select>
				</view>
			</view>
			
			<view class="cu-form-group margin-top-xs bg-g-main radius">
				<view class="title text-main">状态：</view>
				<view class="w-60 text-sm">
					<view class="flex justify-end align-center align-center">
						<view  @tap="afj.flg = !afj.flg;" class="flex align-center justify-start">
							<text class="text-xl"><text
									:class="!afj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"
									class="text-main"></text></text>
							<text>下架</text>
						</view>
											
						<view @tap="afj.flg = !afj.flg;" class="flex justify-start align-center margin-left">
							<text class="text-xl"><text :class="afj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'" 
								class="text-main"></text></text>
							<text>上架</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 上传封面-->
			<view class=" margin-top-xs radius shadow bg-g-main">
				<view class="cu-form-group">
					<view class="title text-main">封面：</view>
				</view>
				<cover-update class="" v-if="afj.fjid != null" v-model="afj.cover" :idKey="afj.fjid" />
			</view>
			<!-- 上传图片相册 -->
			<view class="margin-top-sm radius shadow bg-g-main text-sm">
				<img-update v-if="afj.fjid != null" :idKey="afj.fjid" class="margin-top" v-model="afj.imgs" :size="4" />
			</view>
		</view>
		<view class="flex justify-around align-center padding fixed bottom0 w-100 text-sm">
			<text @tap="cancel" class="bg-red padding-sm radius">取消</text>
			<text @tap="save" class="bg-blue padding-sm radius">保存</text>
		</view>

	</scroll-view>
</template>

<script>
	export default {
		props: {
			fj: {
				type: Object,
				default: function() {
					return {
						fjid: "",
						fjmc: "",
						imgs: [],
						mj: 0,
						cover: "",
						mdid: "",
						rate: 0,
						tp: "",
						func: "",
						dj: 0,
					}
				}
			},
		},
		data: function() {
			return {
				afj: {},
				tps: [],
				funcs: []
			};
		},
		created: function() {
			this.funcs = this.constant.roomfunc.dicts;
			this.tps = this.constant.roomtp.dicts;
			this.loadFj();
		},

		methods: {
			cancel: function() {
				this.$emit("close");
			},
			save: function() {
				this.$emit("close", this.afj);
			},
			loadFj: function() {
				this.afj = this.fj;
			},
		}
	}
</script>

<style>
</style>